<template>
    <div class="entrust">
      <div class="header-warpper" @click="$router.back(-1)">
         <img src="../../assets/l_jt.png" alt="">
         <span>OTC订单</span> 
       </div>
      <cube-scroll
          ref="scroll"
          :data="items"
          direction="horizontal"
          class="horizontal-scroll-list-wrap">
          <ul class="list-wrapper">
            <li v-for="(item,index) in items" :key="index" class="list-item" :class="{active:(indexs==index)}" @click="chooseByts(index)">
                <span>{{item}}</span>
                <span class="wssx" v-if="index==0">
                    <img @click="time_up1" :src="img1" alt="">
                    <img @click="time_down1" :src="img2" alt="">
                </span>
                <span class="wssx" v-if="index==1">
                    <img @click="time_up2" :src="img3" alt="">
                    <img @click="time_down2" :src="img4" alt="">
                </span>
            </li>
            
          </ul>
        </cube-scroll>
        <div class="wt_block" v-for="(item,index) in order" :key="index" @click="details(item.id)">
            <div class="head">
                <div class="head_left">
                <span class="nsb1 nsb2" v-if="item.type==1">买入</span>
                <span class="nsb1" v-else>卖出</span>
                <span class="ns2">{{item.ftypename}}</span>&nbsp;
                <span class="ns3">{{item.addtime}}</span>&nbsp;
                </div>
                <div class="head_right">
                    <span v-if="item.status==2">未付款</span>
                    <span v-else-if="item.status==3">已付款</span>
                    <span v-else-if="item.status==4">已完成</span>
                    <span v-else-if="item.status==1">挂单中</span>
                    <span v-else-if="item.status==5">已取消</span>
                    <img src="../../assets/r_jt.png" alt="">
                </div>
            </div>
            <div class="content1">
                <div class="ns1">
                    <p class="ws1">交易单价</p>
                    <p class="ws2">{{item.price}}</p>
                </div>
                <div class="ns3">
                    <p class="ws1">数量</p>
                    <p class="ws2">{{item.num}}</p>
                </div>
            </div>
            <div class="content2">
                <div class="ns1">
                    <p class="ws1">订单编号</p>
                    <p class="ws2">{{item.ordersn}}</p>
                </div>
                <div class="ns3">
                    <p class="ws1">姓名</p>
                    <p class="ws2">{{item.real_name}}</p>
                </div>
            </div>
        </div>
      <div style="height:1.333333rem"></div>
      <Tabbar :idx="2"/>
    </div>
    
</template>

<script>
// @ is an alias to /src
import Tabbar from '@/views/public/Tabbar.vue'
export default {
  name: 'otc_order',
  components: {
    Tabbar
  },
   data() {
    return {
         items:[
             '未付款',
             '已付款',
             '已完成',
             '已取消',
             '申诉中',
             '所有订单'
         ],
         active1:true,
         active2:true,
         img1:require('../../assets/a_xs.png'),
         img2:require('../../assets/b_xx.png'),
         img3:require('../../assets/b_xs.png'),
         img4:require('../../assets/b_xx.png'),
         img11:require('../../assets/a_xs.png'),
         img22:require('../../assets/b_xs.png'),
         img33:require('../../assets/a_xx.png'),
         img44:require('../../assets/b_xx.png'),
         indexs: 0,
         page:1,
         limit:10,
         status:2,
         time:1,
         order:[]
    }
  },
  created:function(){
      this.loadList();     
  },
  mounted () {
      
  },
  methods: {
    chooseByts (index) {
       this.indexs = index;
       if(this.indexs==0){
           this.status=2; 
           this.loadList(); 
       }else if(this.indexs==1){
           this.status=3;
           this.loadList();
       }else if(this.indexs==2){
           this.status=4;
           this.loadList();
       }else if(this.indexs==3){
           this.status=5;
           this.loadList();
       }else if(this.indexs==4){
           this.status=6;
           this.loadList();
       }else if(this.indexs==5){
            this.status=0;
            this.loadList();
       }
       console.log(this.status)
    },
    time_up1(e){
        this.time=1;
        this.img1=this.img11;
        this.img2=this.img44;
        this.img3=this.img22;
        this.img4=this.img44;
        this.loadList();
    },
    time_down1(e){
        this.time=2;
        this.img1=this.img22;
        this.img2=this.img33;
        this.img3=this.img22;
        this.img4=this.img44;
        this.loadList();
    },
    time_up2(e){
        this.time=1;
        this.img1=this.img22;
        this.img2=this.img44;
        this.img3=this.img11;
        this.img4=this.img44;
        this.loadList();
    },
    time_down2(e){
        this.time=2;
        this.img1=this.img22;
        this.img2=this.img44;
        this.img3=this.img22;
        this.img4=this.img33;
        this.loadList();
    },
    loadList(){
        this.$axios.post("/index/otcexchange/myorder",{
            page:this.page,limit:this.limit,status:this.status,time:this.time
        })
      .then(res => {
        if(res.data.code==0){
          this.order=[];
		  this.order=res.data.info;
        }else{
            this.order=[];
        }
	  });
    },
    details(s){
        this.$router.push("/otcdetails?id="+s);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" rel="stylesheet/stylus">
.horizontal-scroll-list-wrap
  .cube-scroll-content
    display: inline-block
  .list-wrapper
    padding: 0 .4rem
    line-height: 60px
    white-space: nowrap
  .list-item
    display: inline-block
    padding-right:.8rem
    font-size:.4rem
    position:relative
   .list-item.active
      color: #e56337
    .list-item.active::after
        content: ""
        position: absolute
        display: block
        bottom: 0
        width: 66%
        height: .066667rem;
        border-radius: .026667rem;
        background-color: #e56337
                
</style>
<style scoped lang="less">  
    .f-flex{
        display: flex;
        display: -webkit-flex;
        align-items: center;
    }
    .entrust{  
            .wssx{
                float: right;
                margin-top: .5rem;
                padding-left: .2rem;
                img{
                     display: block;
                     width: .28rem;
                     height: .146667rem;
                     margin-top: .1rem;
                     
                }
            }
                          
            .wt_block{
                padding:.533333rem .4rem;
                border-bottom: 1px solid #f1f1f1;
                .head{
                    .f-flex();
                    justify-content: space-between;
                    .head_left{
                        .nsb1{
                            color: #e56337;
                            font-size: .453333rem;
                            font-weight: bold;
                            padding-right: .1rem;
                        }
                        .nsb2{
                            color: #00BD84;
                            font-size: .453333rem;
                            font-weight: bold;
                        }
                        .ns2{
                            color: #000;
                            font-size: .453333rem;
                            font-weight: bold;
                        }
                        .ns3{
                            color: #A1A7B7;
                            font-size: .32rem;
                        }
                        .ns4{
                            color: #A1A7B7;
                            font-size: .32rem;
                        }
                    }
                    .head_right{
                        .f-flex();
                        span{
                            color: #A1A7B7;
                            font-size: .373333rem;
                            font-weight: bold;
                            padding-right: .266667rem
                        }
                        img{
                            width: 0.2rem;
                            height: 0.3rem;
                        }
                    }
                }
                .content1>.ns1{
                    width: 35%;
                }
                .content1>.ns2{
                    width: 30%;
                }
                .content1>.ns3{
                    width: 35%;
                }
                .content1>.ns3>.ws1{
                    text-align: right;
                }
                .content2>.ns1{
                    width: 35%;
                }
                .content2>.ns2{
                    width: 30%;
                }
                .content2>.ns3{
                    width: 35%;
                }
                .content2>.ns3>.ws1{
                    text-align: right;
                }
                .content1{
                    margin-top: .533333rem;
                    .f-flex();
                    justify-content: space-between;
                    .ns1{
                        text-align: left;
                        margin-bottom: .266667rem;
                        .ws1{
                            color: #B9BFD2;
                            font-size: .32rem;
                            font-weight: bold;
                            margin-bottom: .266667rem
                        }
                        .ws2{
                            color: #A1A7B7;
                            font-size: .426667rem;
                            font-weight: bold;
                        }
                    }
                    .ns2{
                        text-align: left;
                        margin-bottom: .266667rem;
                       .ws1{
                            color: #B9BFD2;
                            font-size: .32rem;
                            font-weight: bold;
                            margin-bottom: .266667rem
                        }
                        .ws2{
                            color: #A1A7B7;
                            font-size: .426667rem;
                            font-weight: bold;
                        }
                    }
                    .ns3{
                        text-align: right;
                        margin-bottom: .266667rem;
                        .ws1{
                            color: #B9BFD2;
                            font-size: .32rem;
                            font-weight: bold;
                            margin-bottom: .266667rem
                        }
                        .ws2{
                            color: #A1A7B7;
                            font-size: .426667rem;
                            font-weight: bold;
                            text-align: right;
                        }
                    }
                }
                .content2{
                    .f-flex();
                     margin-top: .273333rem;
                    justify-content: space-between;
                    .ns1{
                        text-align: left;
                        margin-bottom: .266667rem;
                        .ws1{
                            color: #B9BFD2;
                            font-size: .32rem;
                            font-weight: bold;
                            margin-bottom: .266667rem
                        }
                        .ws2{
                            color: #A1A7B7;
                            font-size: .426667rem;
                            font-weight: bold;
                        }
                    }
                    .ns2{
                        text-align: left;
                        margin-bottom: .266667rem;
                        .ws1{
                            color: #B9BFD2;
                            font-size: .32rem;
                            font-weight: bold;
                            margin-bottom: .266667rem
                        }
                        .ws2{
                            color: #A1A7B7;
                            font-size: .426667rem;
                            font-weight: bold;
                        }
                    }
                    .ns3{
                        text-align: right;
                        margin-bottom: .266667rem;
                        .ws1{
                            color: #B9BFD2;
                            font-size: .32rem;
                            font-weight: bold;
                            margin-bottom: .266667rem
                        }
                        .ws2{
                            color: #A1A7B7;
                            font-size: .426667rem;
                            font-weight: bold;
                            text-align: right;
                        }
                    }
                }
            }
        }
        .b-back{
            position: absolute;
            left:.4rem;
            top: .3rem;
            height: 1.6rem;
            img{
                width: .213333rem;
                height: .373333rem;
            }
        }
        .xiaohua{
            width: .506667rem;
            position: absolute;
            right: .4rem;
            top: .6rem;

        }
        .w_tab{
            height: 1.6rem;
            .f-flex();
            justify-content: center;
            .tab1{
                color: #737a92;
                border:1px solid#c3c6cf;
                position: relative;
                font-size: .373333rem;    
                height: .88rem;     
                width: 2.133333rem;
                line-height: .88rem; 
                text-align: center;
            }
            .tab1.active{
                background-color: #f57d13;
                color: #fff;
                border-radius: 0;    
            }
    }
</style>

